<div class="charge-coupon">
  <!--确认弹窗-->
  <p-confirmDialog acceptLabel="确认" rejectLabel="取消"></p-confirmDialog>
  <!--消息提示-->
  <p-messages  [closable]="true" [style]="{'position':'fixed','left': '10vw', 'top': '0','margin-top': '0','width': '100vw','z-index':'9999'}"></p-messages>
  <!--顶部按钮-->
  <div class="charge-coupon-header">
    <div class=" ui-g-12">
      <div class="ui-g-1 charge-coupon-header-btn charge-coupon-header-btn-add" (click)="couponAddClick()">
        <img class="charge-coupon-header-img-add" src="assets/images/ic_add.png" alt="">
        <span>增 加</span>
      </div>
      <div class="ui-g-1 charge-coupon-header-btn charge-coupon-header-btn-modify" (click)="couponModifyClick()">
        <img class="charge-coupon-header-img-modify" src="assets/images/ic_modify.png" alt="">
        <span>修 改</span>
      </div>
      <div class="ui-g-1 charge-coupon-header-btn charge-coupon-header-btn-delete" (click)="couponDeleteClick()">
        <img class="charge-coupon-header-img-delete" src="assets/images/ic_delete.png" alt="">
        <span>删 除</span>
      </div>
      <div style="margin-top: 4.5vh;font-size: 0.875rem;margin-left: 1vw">
        <label style="color: #fff;margin-left: 0.5vw" >小区：</label>
        <p-dropdown [options]="SearchOption.village" scrollHeight="100px" placeholder="请选择小区..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">地块：</label>
        <p-dropdown [options]="SearchOption.region" scrollHeight="100px" placeholder="请选择地块..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">楼栋：</label>
        <p-dropdown [options]="SearchOption.building" scrollHeight="100px" placeholder="请选择楼栋..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">单元：</label>
        <p-dropdown [options]="SearchOption.unit"  scrollHeight="100px" placeholder="请选择单元..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">房间：</label>
        <p-dropdown [options]="SearchOption.room"  scrollHeight="100px" placeholder="请选择房间..."></p-dropdown>
      </div>
    </div>
    <!--//搜索-->
    <div class="ui-inputgroup charge-coupon-header-search">
      <input type="text" pInputText placeholder="请输入电话或房间号" style="width: 7vw" [(ngModel)]="couponSeachData">
      <button id="disabled-btn" class="charge-coupon-header-btn-search" type="button"  (click)="couponSearchClick()"  label="搜索">搜索</button>
    </div>
  </div>
  <!--表格-->
  <div class="charge-coupon-table">
    <p-scrollPanel [style]="{width:'100%',height: '95%'}" styleClass="custombar">
      <p-table [columns]="couponTableTitle" [value]="couponTableContent"  [(selection)]="couponSelect" (onRowSelect)="coupononRowSelect($event)">
        <ng-template pTemplate="header" let-columns>
          <tr >
            <th style="width: 3em"  [ngStyle]="this.couponTableTitleStyle">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th *ngFor="let col of columns"  [ngStyle]="this.couponTableTitleStyle">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
          <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=1" [ngStyle]="{'background':'#33353C','color':'#DEDEDE','text-align': 'center','height':'2vw'}">
            <td>
              <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td  *ngFor="let col of columns.slice(0,columns.length-1);" >
              {{rowData[col.field]}}
            </td>
            <td>
              <button class="charge-coupon-table-Btn" (click)="couponDetailClick(rowData)">详情</button>
            </td>
          </tr>
          <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=0" [ngStyle]="{'background':'#2E3037','color':'#DEDEDE','text-align': 'center','height':'2vw'}">
            <td>
              <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td  *ngFor="let col of columns.slice(0,columns.length-1)" >
              {{rowData[col.field]}}
            </td>
            <td >
              <button class="charge-coupon-table-Btn" (click)="couponDetailClick(rowData)">详情</button>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </p-scrollPanel>

  </div>
  <!--增加弹窗-->
  <p-dialog header="业主信息添加" [(visible)]="couponAddDialog" [width]="800">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >小区名称：</label>
        </div>
        <div class="ui-g-8"  [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown scrollHeight="100px"  placeholder="请选择小区.." [(ngModel)]="couponAdd.villageName"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >楼宇名称：</label>
        </div>
        <div class="ui-g-8"  [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown scrollHeight="100px"  placeholder="请选择楼宇.." [(ngModel)]="couponAdd.buildingName"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >单元名称：</label>
        </div>
        <div class="ui-g-8"  [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown scrollHeight="100px"  placeholder="请选择单元.." [(ngModel)]="couponAdd.unitName"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addroomCode">房间代码：</label>
        </div>
        <div class="ui-g-8">
          <input id="addroomCode" type="text" pInputText placeholder="请输入房间代码.." [(ngModel)]="couponAdd.roomCode">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addcouponName">优惠券名称：</label>
        </div>
        <div class="ui-g-8">
          <input id="addcouponName" type="text" pInputText placeholder="请输入优惠券名称.." [(ngModel)]="couponAdd.couponName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addbclientName">客户名称：</label>
        </div>
        <div class="ui-g-8">
          <input id="addbclientName" type="text" pInputText placeholder="请输入客户名称.." [(ngModel)]="couponAdd.clientName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addmobilePhone">客户电话：</label>
        </div>
        <div class="ui-g-8">
          <input id="addmobilePhone" type="text" pInputText placeholder="请输入客户电话.." [(ngModel)]="couponAdd.mobilePhone">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addcouponAmount">优惠金额：</label>
        </div>
        <div class="ui-g-8">
          <input id="addcouponAmount" type="text" pInputText placeholder="请输入优惠金额.." [(ngModel)]="couponAdd.couponAmount">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addDeductedPropertyAmount">抵扣物业费金额：</label>
        </div>
        <div class="ui-g-8">
          <input id="addDeductedPropertyAmount" type="text" pInputText placeholder="请输入抵扣物业费金额.." [(ngModel)]="couponAdd.DeductedPropertyAmount">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addbalanceAmount">转入余额金额：</label>
        </div>
        <div class="ui-g-8">
          <input id="addbalanceAmount" type="text" pInputText placeholder="请输入转入余额金额..." [(ngModel)]="couponAdd.balanceAmount">
        </div>
      </div>
      <div class="ui-g-6" >
        <div class="ui-g-4">
          <label >使用状态：</label>
        </div>
        <div class="ui-g-8">
          <p-radioButton type="radio" label="使用"  value="使用" name="group" [(ngModel)]="couponAdd.useStatus"></p-radioButton>
          <p-radioButton type="radio" label="未使用"  value="未使用" name="group" [ngStyle]="{'margin-left':'1vw'}"  [(ngModel)]="couponAdd.useStatus"></p-radioButton>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >开始时间：</label>
        </div>
        <div class="ui-g-8">
          <!--<p-calendar [showTime]="true"  [monthNavigator]="true" [yearNavigator]="true"></p-calendar>-->
          <p-calendar [(ngModel)]="couponAdd.startTime" placeholder="请选择开始时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy/mm/dd"  yearRange="2017:2030"  [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >过期时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="couponAdd.expiredTime"  placeholder="请选择过期时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy/mm/dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <!--<div class="ui-g-6">-->
        <!--<div class="ui-g-4">-->
          <!--<label >获取金券时间：</label>-->
        <!--</div>-->
        <!--<div class="ui-g-8">-->
          <!--<p-calendar [(ngModel)]="couponAdd.getCouponTime" placeholder="请选择交房时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy/mm/dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>-->
        <!--</div>-->
      <!--</div>-->
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-sure" (click)="couponAddSureClick()">确认</button>
        <button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-false" (click)="couponAddDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--修改弹窗-->
  <p-dialog header="信息修改" [(visible)]="couponModifayDialog" [width]="800">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >小区名称：</label>
        </div>
        <div class="ui-g-8"  [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown scrollHeight="100px"  [placeholder]="couponModify.villageName" [(ngModel)]="couponModify.villageName"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >楼宇名称：</label>
        </div>
        <div class="ui-g-8"  [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown scrollHeight="100px"  [placeholder]="couponModify.buildingName"  [(ngModel)]="couponModify.buildingName"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >单元名称：</label>
        </div>
        <div class="ui-g-8"  [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown scrollHeight="100px"  [placeholder]="couponModify.unitName"  [(ngModel)]="couponModify.unitName"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="modifyroomCode">房间代码：</label>
        </div>
        <div class="ui-g-8">
          <input id="modifyroomCode" type="text" pInputText placeholder="请输入房间代码.." [(ngModel)]="couponModify.roomCode">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="modifycouponName">优惠券名称：</label>
        </div>
        <div class="ui-g-8">
          <input id="modifycouponName" type="text" pInputText placeholder="请输入优惠券名称.." [(ngModel)]="couponModify.couponName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="modifybclientName">客户名称：</label>
        </div>
        <div class="ui-g-8">
          <input id="modifybclientName" type="text" pInputText placeholder="请输入客户名称.." [(ngModel)]="couponModify.clientName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="modifymobilePhone">客户电话：</label>
        </div>
        <div class="ui-g-8">
          <input id="modifymobilePhone" type="text" pInputText placeholder="请输入客户电话.." [(ngModel)]="couponModify.mobilePhone">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="modifycouponAmount">优惠金额：</label>
        </div>
        <div class="ui-g-8">
          <input id="modifycouponAmount" type="text" pInputText placeholder="请输入用户类型" [(ngModel)]="couponModify.couponAmount">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="modifyDeductedPropertyAmount">抵扣物业费金额：</label>
        </div>
        <div class="ui-g-8">
          <input id="modifyDeductedPropertyAmount" type="text" pInputText placeholder="请输入用户类型" [(ngModel)]="couponModify.DeductedPropertyAmount">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addbalanceAmount">转入余额金额：</label>
        </div>
        <div class="ui-g-8">
          <input id="modifybalanceAmount" type="text" pInputText placeholder="请输入用户类型" [(ngModel)]="couponModify.balanceAmount">
        </div>
      </div>
      <div class="ui-g-6" >
        <div class="ui-g-4">
          <label >使用状态：</label>
        </div>
        <div class="ui-g-8">
          <p-radioButton type="radio" label="使用"  value="使用" name="group" [(ngModel)]="couponModify.useStatus"></p-radioButton>
          <p-radioButton type="radio" label="未使用"  value="未使用" name="group" [ngStyle]="{'margin-left':'1vw'}"  [(ngModel)]="couponModify.useStatus"></p-radioButton>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >开始时间：</label>
        </div>
        <div class="ui-g-8">
          <!--<p-calendar [showTime]="true"  [monthNavigator]="true" [yearNavigator]="true"></p-calendar>-->
          <p-calendar [(ngModel)]="couponModify.startTime" placeholder="请选择租赁开始日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy/mm/dd"  yearRange="2017:2030"  [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >过期时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="couponModify.expiredTime"  placeholder="请选择租赁截止日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy/mm/dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <!--<div class="ui-g-6">-->
      <!--<div class="ui-g-4">-->
      <!--<label >获取金券时间：</label>-->
      <!--</div>-->
      <!--<div class="ui-g-8">-->
      <!--<p-calendar [(ngModel)]="couponAdd.getCouponTime" placeholder="请选择交房时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy/mm/dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-sure" (click)="couponModifySureClick()">确认</button>
        <button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-false"  (click)="couponModifayDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--详情弹窗-->
  <p-dialog header="详细信息" [(visible)]="couponDetailDialog" [width]="800">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'3vh','text-align':'center'}">
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >小区名称：</label>
        </div>
        <div class="ui-g-8">
          <span>{{couponDetail.villageName}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >楼宇名称：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.buildingName}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >单元名称：</label>
        </div>
        <div class="ui-g-8">
          <span>{{couponDetail.unitName}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >房间代码：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.roomCode}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >优惠券名称：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.couponName}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >客户名称：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.clientName}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >客户电话：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.mobilePhone}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label>优惠金额：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.couponAmount}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="modifyroomCode">抵扣物业费金额：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.DeductedPropertyAmount}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label>转入余额金额：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.balanceAmount}}</span>
        </div>
      </div>
      <div class="ui-g-6" >
        <div class="ui-g-4">
          <label >使用状态：</label>
        </div>
        <div class="ui-g-8">
          <span>{{couponDetail.useStatus}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >获取金券时间：</label>
        </div>
        <div class="ui-g-8">
          <span >{{couponDetail.getCouponTime}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >开始时间：</label>
        </div>
        <div class="ui-g-8">
          <span>{{couponDetail.startTime}}</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >过期时间：</label>
        </div>
        <div class="ui-g-8">
          <span>{{couponDetail.expiredTime}}</span>
        </div>
      </div>

    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <!--<button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-sure" (click)="couponModifySureClick()">确认</button>-->
        <button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-false"  (click)="couponDetailDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--文件上传-->
  <!--<button class="charge-coupon-dialog-Btn charge-coupon-bottom-Btn" (click)="AddMoreClick()" >批量导入</button>-->
  <!--<p-dialog header="信息上传" [(visible)]="couponUploadFileDialog" [width]="800">-->
    <!--&lt;!&ndash;Content&ndash;&gt;-->
    <!--<div class="ui-g ui-fluid" >-->
      <!--<div class="ui-g-12">-->
        <!--<p-fileUpload multiple="multiple"  maxFileSize="10000000000"  [files]="uploadedFiles" >-->
          <!--&lt;!&ndash;<ng-template pTemplate="content" >&ndash;&gt;-->
          <!--&lt;!&ndash;&lt;!&ndash;<ul *ngIf="uploadedFiles.length">&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;&lt;!&ndash;<li *ngFor="let file of uploadedFiles" >{{file.name}} - {{file.size}} bytes</li>&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;&lt;!&ndash;</ul>&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;</ng-template>&ndash;&gt;-->
        <!--</p-fileUpload>-->
        <!--&lt;!&ndash;<input type="file" id="file" name="file" (change)="getFile($event)">&ndash;&gt;-->
      <!--</div>-->
    <!--</div>-->
    <!--<p-footer>-->
      <!--<div class="ui-dialog-buttonpane ui-helper-clearfix">-->
        <!--<button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-sure" (click)="couponUploadSureClick()">确认</button>-->
        <!--<button class="charge-coupon-dialog-Btn charge-coupon-dialog-Btn-false"  (click)="couponUploadFileDialog=false">取消</button>-->
      <!--</div>-->
    <!--</p-footer>-->
  <!--</p-dialog>-->
  <rbi-paging [option]="option" (pageClick)="nowpageEventHandle($event)"></rbi-paging>
  <rbi-loading [hidden]="loadingHide" style="position: absolute;left: 45vw;top:40vh;z-index: 99999"></rbi-loading>
</div>
